<style scoped lang="scss">
.normal_box{
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  .dish_box{
    width: 100%;
    padding: 10px;
    overflow: auto;
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-flow: wrap;
    max-height: calc(100% - 80px);
    .dish_item{
      width: calc(25% - 20px);
      //min-width: 250px;
      min-width: 310px;
      height: 200px;
      padding: 15px 10px;
      margin: 10px;
      box-shadow: 0px 2px 15px 0px rgba(204,208,209,0.8);
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      background: #FFFFFF;
      border-radius: 10px;
      box-sizing: border-box;
      .dish_left{
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        //padding: 5px;
        .dish_top{
          .dish_name{
            font-size: 22px;
            margin-bottom: 10px;
            max-width: 140px;
          }
          .dish_type{
            color: #999999;
            margin-bottom: 10px;
            font-size: 14px;
          }
        }
        .dish_bottom{
          display: flex;
          flex-flow: row;
          justify-content: space-between;
          align-items: flex-end;
          width: 100%;
          .dish_price{
            font-size: 22px;
            color: #FF3B36;
          }
          .dish_unit{
            font-size: 16px;
            color: #1a1a1a;
          }
          .dish_num{
            .amount_box{
              margin: 0 10px;
              font-size: 20px;
              position: relative;
              ::v-deep input{
                font-size: 18px;
                padding:0 5px;
                text-align: left;
              }
              ::v-deep i{
                font-size: 16px;
                background: none;
                color: #606266;
                position: absolute;
                right: 2px;
                top: -2px;
                cursor: pointer;
              }
            }

            i{
              font-size: 22px;
              background: #47C370;
              padding: 5px;
              border-radius: 50%;
              color: #FFFFFF;
            }
          }
        }
      }
      .dish_img{
        margin-left: 20px;
        width: 160px;
        height: 160px;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .normal_bottom{
    border-top: solid 1px #DEDEDE;
    padding: 10px 30px;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    .money_amount{
      .label—text{
        font-size: 18px;
        color: #1a1a1a;
      }
      .amount_text{
        font-size: 30px;
        color: #FF3B36;
        font-weight: bolder;
      }
    }
  }
  .buffet-button {
    border-color: #dddddd;
    border-width: 1px;
    cursor: pointer;
    display: inline-block;
    width: 200px;
    height: 55px;
    border-radius: 30px;
    text-align: center;
    font-size: 24px;
  }
}
</style>

<template>
  <div class="normal_box">
    <div class="dish_box">
      <template v-for="(item) in dishList">
        <div class="dish_item">
          <div class="dish_left">
            <div class="dish_top">
              <div class="dish_name" >{{item.name}}</div>
              <div class="dish_type" >类型：{{item.type || '暂无'}}</div>
              <div class="dish_type">单位：{{item.unit || '暂无' }}</div>
            </div>
            <div class="dish_bottom">
              <div class="dish_price">{{item.price | currency}}<span class="dish_unit"> / {{item.unit}}</span></div>
              <div class="dish_num">
<!--                <span>-->
<!--                  <i class="el-icon-minus" @click="minus(item)"></i>-->
<!--                </span>-->
                <span class="amount_box">
<!--                  {{item.count || 0}}-->
                  <el-input-number  v-model="item.count" :controls="false" :min="0"  :precision="2" style="width: 80px;" @change="data=>countPrice(item,data)"></el-input-number>
                  <i  v-if="item.count>0" class="el-icon-circle-close close-box" @click="clearCount(item)"></i>
                </span>
<!--                <span>-->
<!--                  <i class="el-icon-plus" @click="plus(item)"></i>-->
<!--                </span>-->
              </div>
            </div>
          </div>
<!--          <div class="dish_img">-->
<!--            <el-image :src="baseUrl +  item.imgUrl"></el-image>-->
<!--          </div>-->
        </div>
      </template>
    </div>
    <div class="normal_bottom">
      <div class="money_amount">
        <span class="label—text">
          合计金额：
        </span>
        <span class="amount_text">
          {{orderForm.price | currency }}
        </span>
        <el-button v-if="orderForm.price>0" class="buffet-button" type="primary" plain style="width: 200px;font-size: 22px;margin-left: 10px" @click="normalsInfo=true" >点餐明细</el-button>
      </div>
      <div style="display: flex;flex-flow: row;align-items: center;justify-content: center">
        <el-button class="buffet-button"  type="primary" style="margin-right: 20px" @click="submitOrder()" >一键下单</el-button>
        <el-button class="buffet-button" type="primary" plain style="width: 200px;font-size: 22px;margin-left: 10px" @click="openOrder()" >查看订单</el-button>
      </div>
    </div>
    <el-dialog :visible.sync="normalsInfo" title="点餐明细" width="800px" append-to-body @close="normalsInfo=false">
      <el-table border :data="orderForm.normals">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="name" label="菜名">
          <template v-slot="{row}">
            {{row.name}}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="单价" width="120px">
          <template v-slot="{row}">
            {{row.price | currency}} / {{row.unit}}
          </template>
        </el-table-column>
        <el-table-column prop="count" label="数量" width="150px">
          <template v-slot="{row}">
            <!--            {{row.count}}-->
            <el-input-number :min="1" style="width: 120px" controls-position="right" v-model="row.count" size="small" @change="normalsCountChange(row)"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column prop="total" label="小计" width="150px">
          <template v-slot="{row}">
            {{row.price*row.count | currency}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template v-slot="{row,$index}">
            <el-button type="danger" size="mini" @click="normalsRemove(row,$index)">移除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {createOrder, getTodayNormal, getTodayReplace} from "@/api/shop/order";
import item from "@/layout/components/Sidebar/Item.vue";

export default {
  name: "normal",
  data(){
    return{
      baseUrl: process.env.VUE_APP_BASE_API,
      dishList:[],
      orderForm:{
        payerId:'',
        type:'',
        // buffetCount:'',
        price:0,
        normals:[],
      },
      searchForm:{},
      normalsInfo:false,
    }
  },
  props:{
    currentUser:{
      type:Number,
      default:null,
    },
    orderType:{
      type:String,
      default: '',
    },
  },
  watch:{
    orderType(){
      this.searchGoods()
    },
  },
  created() {
    this.searchGoods()
  },
  methods:{
    clearCount(item){
      item.count=0
      this.countPrice(item)
    },
    countPrice(item,data){
      const index=this.orderForm.normals.findIndex(val=>val.id===item.id)
      if(index>-1){
        this.orderForm.normals[index].count=data
        if(item.count===0){
          this.orderForm.normals.splice(index,1)
        }
      }else{
        this.orderForm.normals.push(JSON.parse(JSON.stringify(item)))
      }
      this.calculatePrice()
    },
    //减少
    minus(item){
      if(item.count>0){
        item.count-=0.01
        this.orderForm.price-=0.01*item.price
      }
    },
    //增加
    plus(item){
      item.count+=0.01
      this.orderForm.price+=0.01*item.price
    },
    //菜单已点数据处理
    dishSelect(){
      this.dishList.map((item,dishIndex)=>{
        const index=this.orderForm.normals.findIndex(val=>val.id===item.id)
        if(index>-1){
          item.count=this.orderForm.normals[index].count
        }else{
          item.count=0
        }
      })
    },
    //计算订单金额
    calculatePrice(){
      this.orderForm.price=0
      this.orderForm.normals.map(item=>{
        this.orderForm.price+=item.price*item.count
      })
    },
    normalsRemove(item,index){
      this.orderForm.normals.splice(index,1)
      this.dishSelect()
      this.calculatePrice()
    },
    normalsCountChange(){
      this.dishSelect()
      this.calculatePrice()
    },
    //获取菜单列表
    searchGoods(searchForm){
      this.searchForm=searchForm
      // let dishData=[]
      getTodayReplace (searchForm).then(res=>{
        // dishData=res.data
        this.dishList=res.data
        this.dishSelect()
        let total=res.data.length || 0
        this.$emit('dishTotal',total)
      })
    },
    //查看订单
    openOrder(){
      this.$router.push({
        path:'/order/book/replace/',
        query:{
          type:'replace'
        }
      })
    },
    //提交订单
    submitOrder(){
      if(!this.currentUser){
        this.$message.error('请选择就餐人')
        return
      }
      if(this.orderForm.price<=0){
        this.$message.error('当前订单合计金额为0元')
        return
      }
      this.$confirm('请确认是否提交').then(()=>{
        this.orderForm.payerId=this.currentUser
        this.orderForm.replaces=[]
        this.dishList.map(item=>{
          if(item.count>0){
            this.orderForm.replaces.push(item)
          }
        })
        this.orderForm.type=this.orderType
        createOrder(this.orderForm).then(res=>{
          this.searchGoods(this.searchForm)
          this.$message.success('下单成功')
          this.orderForm={
            payerId:null,
            type:'buffet',
            price:0,
            normals:[],
          }
          this.$emit('closeUser')
        })
      })
    },
  }
}
</script>
